<template>
	<view class="app-container">
		<view class="content">
			<form>
				<view class="form-item">
					<view class="title">收货人</view>
					<input v-model="form.name" class="uni-input" name="input" placeholder="请填写收货人姓名" />
				</view>
				<hr>
				<view class="form-item">
					<view class="title">手机号码</view>
					<input v-model="form.phone" class="uni-input" name="input" placeholder="请填写收货人手机号" />
				</view>
				<hr>
				<view class="form-item" @click="showMulLinkageThreePicker()">
					<view class="title">所在地区</view>
					<input v-if="pickerText" v-model="pickerText" class="uni-input" name="input" placeholder="请填写收货人手机号" />
					<text class="uni-input placeholder" v-else>省市区、县等</text>
				</view>
				<hr>
				<view class="form-item">
					<view class="title">详细地址</view>
					<textarea v-model="form.detailAddress" class="uni-input" name="input" placeholder="街道、楼号等"></textarea>
				</view>
				<hr>
				<view class="default-switch">
					<view class="title">设为默认收货地址</view>
					<switch @change="switchChange" :checked="form.isDefault" style="transform:scale(0.7)" color="#F43529" name="switch" />
				</view>
			</form>
			<cc-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
				@onCancel="onCancel" @onConfirm="onConfirm"></cc-city-picker>
		</view>
		<view class="address-footer">
			<view class="add-btn" @tap="addAddress">保存</view>
		</view>
	</view>
</template>

<script>
	import $http from '@/common/api/request.js'
	export default {
		data() {
			return {
				cityPickerValueDefault: [0, 0, 1],
				themeColor: '#0BBBEF',
				pickerText: '',
				form: {
					id: '',
					detailAddress: '',
					name: '',
					phone: '',
					// 省份
					province: '',
					// 市
					city: '',
					// 县、区
					region: '',
					isDefault: false
				}
			}
		},
		onLoad(e) {
			if(e.record) {
				uni.setNavigationBarTitle({
					title: '修改收货地址'
				})
				let data = JSON.parse(e.record)
				this.form.id = data.id
				this.form.name = data.name
				this.form.phone = data.phone
				this.form.province = data.province
				this.form.city = data.city
				this.form.region = data.region
				this.form.isDefault = data.isDefault
				this.form.detailAddress = data.detailAddress
				this.pickerText = data.province + '-' + data.city + '-' + data.region
			}
		},
		methods: {
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show()
			},
			switchChange(e) {
				this.form.isDefault = e.target.value
			},
			onConfirm(e) {
				this.pickerText = e.label
				let data = e.label.split('-')
				this.form.province = data[0]
				this.form.city = data[1]
				this.form.region = data[2]
			},
			onCancel(e) {},
			addAddress() {
				this.verifyForm()
				if(this.form.id) {
					$http.request({
						url: '/member/address/update',
						method: 'post',
						data: this.form,
						loading: true,
						loadingText: '正在更新'
					}).then(res => {
						if(res.success) {
							uni.navigateBack()
						}
					})
				} else {
					$http.request({
						url: '/member/address/save',
						method: 'post',
						data: this.form,
						loading: true,
						loadingText: '正在保存'
					}).then(res => {
						if(res.success) {
							uni.navigateBack()
						}
					})
				}
			},
			verifyForm() {
				if(!this.form.name) {
					uni.showToast({
						duration: 1000,
						title: '请输入收货人姓名',
						icon: 'none'
					})
					return
				}
				if(!this.form.phone) {
					uni.showToast({
						duration: 1000,
						title: '请输入收货人手机号',
						icon: 'none'
					})
					return
				}
				if(!this.form.province) {
					uni.showToast({
						duration: 1000,
						title: '请选择所在地区',
						icon: 'none'
					})
					return
				}
				if(!this.form.detailAddress) {
					uni.showToast({
						duration: 1000,
						title: '请输入详细地址',
						icon: 'none'
					})
					return
				}
			}
		},

	}
</script>

<style scoped>
	.app-container {
		padding: 20rpx;
		background-color: #F0F1F5;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
	}
	
	.placeholder {
		color: #808080;
	}

	hr {
		height: 1rpx;
		margin: auto;
		background-color: #E5E5E5;
		border: none;
		width: 95%;
	}

	.content {
		background-color: #FFF;
		border-radius: 16rpx;
		overflow: hidden;
		padding: 20rpx;
	}

	.form-item {
		display: flex;

		.title {
			display: flex;
			font-size: 26rpx;
			flex-direction: column;
			justify-content: center;
		}
	}
	
	.default-switch {
		margin-top: 16rpx;
		font-size: 26rpx;
		display: flex;
		justify-content: space-between;
	}
	
	.address-footer {
		position: fixed;
		left: 0;
		bottom: var(--window-bottom, 0);
		width: 100%;
		height: 100rpx;
		justify-content: space-between;
		align-items: center;
		background-color: #FFFFFF;
		border-top: 2rpx solid white;
		text-align: center;
	}
	
	.add-btn {
		background: linear-gradient(to right, #FC4950, #F93C28);
		border-radius: 30rpx;
		padding: 15rpx;
		width: 90%;
		margin: 10rpx auto;
		font-size: 26rpx;
		color: #FFF;
	}
</style>